<template>
  <div class="artist">
    <br />
    <b-table
      :striped="striped"
      :bordered="bordered"
      :outlined="outlined"
      :small="small"
      :hover="hover"
      :dark="dark"
      :fixed="fixed"
      :foot-clone="footClone"
      :head-variant="light"
      :items="albumList"
      :fields="fields"
      style="font-family: Segoe UI, Microsoft Yahei, Verdana, Tahoma, Arial; font-size: 12px; background-color: rgba(0,0,0,0.8)"
      v-if="albumList != undefined && albumList != null  && albumList.length > 0"
    >
      <template v-slot:cell(recommend.img)="data">
        <span v-if="data.value">
          <b-img :src="data.value" alt style="width:40px; height:40px"></b-img>
        </span>
      </template>
      <template v-slot:cell(date)="data">
        <span v-if="data.value">{{data.value.substring(0,4)}}</span>
      </template>
      <template v-slot:cell(chart_uk)="data">
        <span v-if="data.value">{{data.value}}</span>
        <span v-else>—</span>
      </template>
      <template v-slot:cell(chart_us)="data">
        <span v-if="data.value">{{data.value}}</span>
        <span v-else>—</span>
      </template>
      <template v-slot:cell(covernameartist)="data">
        <router-link
          :to="{path: 'album', query: {name: `${data.item.alias}`}}"
        >
          <img :src="`${data.item.cover}`" title class="placeholder60"/>
        </router-link>
      </template>
      <template v-slot:cell(nameartist)="data">
        <router-link
          :to="{path: 'album', query: {name: `${data.item.alias}`}}"
        >{{data.item.name | truncate}}</router-link>
      </template>
      <template v-slot:cell(category2)="data">{{dict_album[data.value]}}</template>
      <template v-slot:cell(rating_amg.img)="data">
        <img :src="`${data.value}`" title style="width:75px" />
      </template>
      <template v-slot:cell(rating_home.img)="data">
        <img :src="`${data.value}`" title style="width:75px" />
      </template>
      <template v-slot:cell(review_length)="data">
        <img :src="url_review" title v-if="data.value" />
      </template>
    </b-table>
    <br />
    <br />
    <br />
    <br />
    <br />
  </div>
</template>

<script>
export default {
  props: {
    artist_name_parent: String,
  },
  //props: ['artist_name_parent'],
  async asyncData(context) {
      let [request1Data] = await Promise.all([context.$axios.get('/api/albums/', { params: { artist: context.route.params.name, category: context.route.query.category, showLoading: false } })]).catch(
        err => {
          console.log(err);
        },
      );
      return {
        albumList: request1Data.data,
      };
  },
  data() {
    return {
      category: this.$route.query.category,
      input: '',
      artist: '',
      artist_name: '',
      albumList: [],
      items: [],
      fields: [
        {
          key: 'recommend.img',
          label: '推荐',
          class: 'text-center',
        },
        //{
        //  key: 'index',
        //  label: '序号',
        //},
        {
          key: 'date',
          label: '发行年份',
          class: 'text-center',
        },
        {
          key: 'covernameartist',
          label: '封面',
          class: 'text-center',
        },
        {
          key: 'nameartist',
          label: '专辑名称',
        },
        {
          key: 'category2',
          label: '类型',
          sortable: true,
          class: 'text-center',
        },
        {
          key: 'chart_uk',
          label: '英国排名',
          class: 'text-center',
        },
        {
          key: 'chart_us',
          label: '美国排名',
          class: 'text-center',
        },
        {
          key: 'rating_amg.img',
          label: 'AllMusic评级',
        },
        {
          key: 'rating_home.img',
          label: '本站评级',
        },
        {
          key: 'review_length',
          label: '评论',
          class: 'text-center',
        },
      ],
      striped: false,
      bordered: false,
      outlined: false,
      small: true,
      hover: true,
      dark: true,
      fixed: false,
      footClone: false,
      light: 'light',
      url_review: require('@/assets/img/index/review.png'),
      dict_album: { studio: '录音室专辑', live: '现场专辑', compilation: '精选专辑', ep: 'EP', single: '单曲', video: '录影带' },
    };
  },
  filters: {
      truncate: function(value) {
        if (value.length <= 48) {
		  return value;
		} else {
		  return value.substr(0, 48) + "...";
		}
      }
  },
  methods: {
    showAlbums() {
      this.artist_name = this.artist_name_parent;
      this.$route.meta.title = this.artist_name + ' | ' + this.dict_album[this.$route.query.category];
      document.title = this.$route.meta.title;
      this.$axios
        .get('/api/albums/', { params: { artist: this.$route.params.name, category: this.category, showLoading: true } })
        .then(response => {
          var res = response.data;
          this.albumList = res;
          this.items = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
    showArtist() {
      this.$axios
        .get('/api/artists-detail/', { params: { artist: this.$route.params.name, showLoading: false } })
        .then(response => {
          var res = response.data;
          this.artist = res;
        })
        .catch(function(error) {
          console.log(error);
        });
    },
  },
  head() {
    return {
      title: this.artist_name_parent + ' | ' + this.dict_album[this.$route.query.category],
    };
  },
  mounted: function() {
    this.$parent.hide_tooltip1();
    this.$store.dispatch('hideloader');
    //setInterval(this.showAlbums, 10000);
    //this.showAlbums();
    this.artist_name = this.artist_name_parent;
    this.$route.meta.title = this.artist_name + ' | ' + this.dict_album[this.$route.query.category];
    document.title = this.$route.meta.title;
  },
  watch: {
    $route(to, from) {
	  this.$parent.hide_tooltip1();
      this.category = this.$route.query.category;
      this.showAlbums();
    },
    artist_name_parent(val) {
      this.artist_name = val;
      this.$route.meta.title = this.artist_name + ' | ' + this.dict_album[this.$route.query.category];
      document.title = this.$route.meta.title;
    },
  },
};

</script>

<style>
.placeholder60 {
    width: 60px;
	min-height: 60px;
    background-repeat: no-repeat;
    background-size: contain;
    background-image: url(~@/assets/img/background/album_60x60.png);
}
</style>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<!--<style src="../../../assets/css/global.css"></style>


